<template>
	<swiper class="swiper" circular  :autoplay="autoplaySwiper"  :duration="0" :interval="interval" :current="swiperCurrent"
		@change="swiperChange">
		<swiper-item v-for="(item, index) in list" :key="index">
			<image class="swiper-image" v-if="isImageUrl(item.src)" :src="item.src" mode="scaleToFill" lazy-load />
			<div style="height: 100%;width: 100%;position: relative;" v-else>
				<!-- #ifdef APP -->
				 <!-- <video style="height: 100%;width: 100%;position: relative;" loop controls src="https://ui-bus.szfinest.site/upload/2025/03/25/658306429968453.mp4">
				 </video> -->
				<MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" />
				<!-- <view v-if="isShow"
					style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
					<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
						style="width: 40px;height: 40px;"></image>
				</view> -->
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<video class="swiper-video" :id="`Video${item.id}`" :src="item.src" :autoplay="true" :controls="false"
					:show-center-play-btn="false" :enable-progress-gesture="false" object-fit="fill" @ended="endVideo(item.id)" />
				<!-- <view v-if="isShow"
					style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
					<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
						style="width: 40px;height: 40px;"></image>
				</view> -->
				<!-- #endif -->
			</div>
		</swiper-item>
	</swiper>
</template>

<script>
// #ifdef APP
import MyVideo from '@/components/fuyu-MixSwiper/MyVideo.vue'
// #endif
export default {
	components: {
		// #ifdef APP
		MyVideo
		// #endif
	},
	props: {
		list: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			swiperCurrent: 0, //轮播下标
			autoplaySwiper: true,
			isShow: true,
			videoIndex: null,
			videoId: null,
			interval: 20000,
		}
	},
	created() {
		this.interval = this.$store.state.StationConfig.stopSecond;
		// #ifdef MP-WEIXIN
		const regex = /^(http|https):\/\//;
		this.list.forEach(v => {
			const bool = regex.test(v.url);
			if (!bool) {
				const fs = uni.getFileSystemManager();
				const res = new Promise((resolve, reject) => {
					fs.readFile({
						filePath: v.url, // 相对于static目录的路径
						encoding: 'base64',
						success: (res) => {
							v.url = res.data
							// 为临时文件生成一个文件名，您可以根据需要自定义文件名
							const fileName = `temp_video_${Date.now()}.mp4`;
							// 指定临时文件的完整路径
							const tempFilePath = `${uni.env.USER_DATA_PATH}/${fileName}`;
							// 将Base64编码的数据写入临时文件
							fs.writeFile({
								filePath: tempFilePath, // 临时文件路径
								data: v.url, // Base64数据（去掉数据URI部分）
								encoding: 'base64', // 指定编码格式为base64
								success: () => {
									v.url = tempFilePath
								},
								fail: (err) => {
									console.error('写入文件失败：', err);
								}
							});
						},
						fail: (err) => {
							console.error('读取视频文件失败：', err);
						}
					});
				});
			}
		})
		// #endif
	},
	methods: {
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
			const ids = this.list[this.swiperCurrent]
			if (e.detail.current != this.videoIndex) {
				this.endVideo(this.videoId, 'swiper')
			}
			setTimeout(() => {
				if (ids.type == 'video') {
					this.plays(ids.id, this.swiperCurrent)
				}
			}, 1000);
		},
		isImageUrl(url) {
			if (typeof url !== 'string') {
				return true
			}
			// 定义常见的图片文件后缀
			const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
			// 获取URL中的文件后缀
			const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
			// 检查文件后缀是否在图片文件后缀数组中
			return imageExtensions.includes(ext)
		},
		//当video播放得时候 覆盖曾隐藏，不能轮播
		plays(id, index) {
			// #ifndef APP
			let videoContext = uni.createVideoContext(`Video${id}`, this);
			videoContext.play()
			// #endif
			this.videoId = id
			this.videoIndex = index
			this.isShow = false
			this.autoplaySwiper = false
		},
		//加载视频时触发，解决小程序加载报错问题
		loadVideo(id) {
			let videoContext = uni.createVideoContext(`Video${id}`, this);
			videoContext.pause()
			videoContext.seek(0)
		},
		//当video播放结束得时候 进行初始化，恢复轮播
		endVideo(id, type) {
			// #ifndef APP
			let videoContext = uni.createVideoContext(`Video${id}`, this);
			videoContext.pause()
			// #endif
			this.isShow = true
			this.videoIndex = null
			this.videoId = null
			this.autoplaySwiper = true
			if (!type) {
				setTimeout(v => {
					this.swiperCurrent++
				}, 500)
			}
		},
	}
}
</script>
<style scoped>
.swiper {
	width: 100%;
	height: 100%;
}

.swiper-image,
.swiper-video {
	width: 100%;
	height: 100%;
}
</style>